<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员保障</title>
		<link rel="stylesheet" href="css/personalportal.css">
		<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
		<script type="text/javascript" src="js/personalportal.js" ></script>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<script type="text/javascript">
			$(function()
			{
				$(".cshall").mouseover(function()
				{
					$(".cshall-links").show();
				});
				$(".cshall-links").mouseover(function()
				{
					$(".cshall-links").show();
				});
				$(".cshall").mouseout(function()
				{
					$(".cshall-links").hide();
				});
				$(".cshall-links").mouseout(function()
				{
					$(".cshall-links").hide();
				});
			})
			$(function()
			{
				$(".navbar-li1").mouseover(function()
				{
					$(".navbar-li1").animate({marginTop:"10px"},50);
					$(".navbar-li1").css("background-color","rgba(255,255,255,0.1)");
//					alert(".navbar-li1".backgroundColor)
				})
				$(".navbar-li1").mouseout(function()
				{
					$(".navbar-li1").animate({marginTop:"0px"},50);
				})
//				我的支付宝模块end
				
//				移上显示移开消失
				$("#navbar-li-a2").mouseover(function()
				{
					$(".navbar-li2").animate({marginTop:"10px"},50);
				});
				$(".navbar-li2").mouseout(function()
				{
					$(".navbar-li2").animate({marginTop:"0px"},50);
				});
//				点击显示
				$("#navbar-li-a2").click(function()
				{
					$(".center").slideDown("50");
				});
				$(".x-button").click(function()
				{
					$(".center").slideUp("50");
				})
				
				
//				财富中心end
				
				$(".navbar-li3").mouseenter(function()
				{
					$(".navbar-li3").animate({marginTop:"10px"},50);
				})
				$(".navbar-li3").mouseleave(function()
				{
					$(".navbar-li3").animate({marginTop:"0px"},50);
				})
				$("#navbar-li-a3").click(function()
				{
					$(".wrapper3").slideToggle("50");
				});
				$(".widget-message").click(function()
				{
					$(".widget-message-hidden").slideToggle("50");
					$(".li3-content").slideToggle("50");
				})
				
//				用户个人信息end
				
				$("#navbar-li-a4").mouseover(function()
				{
					$(".navbar-li4").animate({marginTop:"10px"},50);
				});
				$(".navbar-li4").mouseout(function()
				{
					$(".navbar-li4").animate({marginTop:"0px"},50);
				});
//				点击显示
				$("#navbar-li-a4").click(function()
				{
					$(".service").slideDown("50");
				});
				$(".x-button").click(function()
				{
					$(".service").slideUp("50");
				})
				
//				生活服务end
				
				$("#navbar-li-a5").mouseover(function()
				{
					$(".navbar-li5").animate({marginTop:"10px"},50);
				});
				$(".navbar-li5").mouseout(function()
				{
					$(".navbar-li5").animate({marginTop:"0px"},50);
				});
//				点击显示
				$("#navbar-li-a5").click(function()
				{
					$(".manage").slideDown("50");
				});
				$(".x-button").click(function()
				{
					$(".manage").slideUp("50");
				})
//				账户管理end
				$("#navbar-li-a2").click(function()
				{
					$(".manage").slideUp("50");
//					$(".center").slideUp("50");
					$(".wrapper3").slideUp("50");
					$(".service").slideUp("50");	
				})
				$("#navbar-li-a3").click(function()
				{
					$(".manage").slideUp("50");
					$(".center").slideUp("50");
//					$(".wrapper3").slideUp("50");
					$(".service").slideUp("50");	
				})
				$("#navbar-li-a4").click(function()
				{
					$(".manage").slideUp("50");
					$(".center").slideUp("50");
					$(".wrapper3").slideUp("50");
//					$(".service").slideUp("50");	
				})
				$("#navbar-li-a5").click(function()
				{
//					$(".manage").slideUp("50");
					$(".center").slideUp("50");
					$(".wrapper3").slideUp("50");
					$(".service").slideUp("50");	
				})




			})
			$(function()
			{
				$(".global-body-safe-select1").mouseover(function()
				{
					$(".global-body-safe1").fadeIn(200);
					$(".global-body-safe2").fadeOut(0);
				})
				$(".global-body-safe-select2").mouseover(function()
				{
					$(".global-body-safe2").fadeIn(200);
					$(".global-body-safe1").fadeOut(0);
				})
				
				
				$(".info-ul-li1").mouseenter(function()
				{
					$(".info-ul-div1").show(200);
				});
				$(".info-ul-li1").mouseleave(function()
				{
					$(".info-ul-div1").hide(0);
				});
				
				$(".info-ul-li2").mouseenter(function()
				{
					$(".info-ul-div2").show(200);
				});
				$(".info-ul-li2").mouseleave(function()
				{
					$(".info-ul-div2").hide(0);
				});
				
				$(".info-ul-li3").mouseenter(function()
				{
					$(".info-ul-div3").show(200);
					$(".info-ul-div3-change").show();
					$(".info-ul-li3 img").hide(0);
				});
				$(".info-ul-li3").mouseleave(function()
				{
					$(".info-ul-div3").hide(0);
					$(".info-ul-div3-change").hide();
					$(".info-ul-li3 img").show(0);
				});
				
				$(".info-ul-li4").mouseenter(function()
				{
					$(".info-ul-div4").show(200);
				});
				$(".info-ul-li4").mouseleave(function()
				{
					$(".info-ul-div4").hide(0);
				});
				
				
				
				
				
				
			})
			
			
		</script>
	</head>
	<body>
		<div class="global-head">
			<div class="global-head-top">
				<div class="wrapper">
					<a href="../chris/html/personal.html"><img src="img/支付宝.png"></a>
					<ul>
					  <li><span>你好，XXX</span></li>
					  <li><a href="#">退出</a></li>
					  <li><a href="Security.html">安全中心</a></li>
					  <li><a href="personalportal.html">会员保障</a></li>
					  <li class="cshall">
					    <a href="#">客户服务</a>
						    <ul class="cshall-links">
						      <li><a href="#">服务大厅</a></li>
						      <li><a href="#">自助服务</a></li>
						      <li><a href="#">提建议</a></li>
						    </ul>
					  </li>
					</ul>
				</div>
			</div>
			<div class="J-nav-global">
				<div class="wrapper2">
					<ul class="nav-menu-current-account">
						<li class="navbar-li1"><a class="navbar-li-a" href="#">我的支付宝</a></li>
						<li class="navbar-li2">
							<div class="center">
								<div class="x-button">
									<button class="x">
										<img src="img/支付宝叉.png" style="cursor:pointer">
									</button>
								</div>
								<ul class="subnav" style="border-bottom: 1px solid #2a2639;">
								  <li>
								    <a href="#">余额宝</a>
								  </li>
								  <li>
								    <a href="#">招财宝</a>
								  </li>
								  <li>
								    <a href="#">存金宝</a>
								  </li>
								  <li>
								    <a href="#">蚂蚁花呗</a>
								  </li>
								  <li>
								    <a href="#">蚂蚁达客</a>
								  </li>
								  <li>
								    <a href="#">蚂蚁聚宝理财</a>
								  </li>
  
								</ul>

							</div>
							<a class="navbar-li-a" id="navbar-li-a2" href="#">财富中心</a>
						</li>
						<li class="navbar-li3" style="width:180px;">
							<a class="navbar-li-a" id="navbar-li-a3" href="#"><img src="img/大头像.png"></a>
							<div class="wrapper3">
								<div class="li3-content">
									<div class="info">
										<h4>username</h4>
										<h4>username@email.com</h4>
										<ul class="info-ul">
											<li class="info-ul-li1"><a href="#"><img src="img/用户头像.png"></a></li>
											<li class="info-ul-li2"><a href="#"><img src="img/手机.png"></a></li>
											<li class="info-ul-li3"><a href="#"><img src="img/盾.png"></a>
												<span class="info-ul-div3-change">待升级</span>
											</li>
											
											<li class="info-ul-li4"><a href="#"><img src="img/小锁.png"></a></li>
											<div class="info-ul-div1">
												<span class="info-ul-span1">已通过支付宝实名认证</span>
												<span class="info-ul-span2"><a href="#">查看详情</a></span>
											</div>
											
											<div class="info-ul-div2">
												<span class="info-ul-span1">已绑定手机号156******17</span>
												<span class="info-ul-span2"><a href="#">管理</a></span>
											</div>
											
											<div class="info-ul-div3">
												<span class="info-ul-span1">会员保障待升级</span>
												<span class="info-ul-span2"><a href="#">点击升级</a></span>
											</div>
											
											<div class="info-ul-div4">
												<span class="info-ul-span1">账户环境安全</span>
											</div>
										</ul>
										<img style="margin-top: 5px;float: left;"src="img/网格.png">
										<a href="#" class="info-a1"></a>
										<a href="#" class="info-a2"></a>
										<a href="#" class="info-a3"></a>
										<a href="#" class="info-a4"></a>
									</div>
								</div>
								<div class="widget-message">
									<img class="widget-message-img" src="img/对话框.png">
								</div>
								<div class="widget-message-hidden">
									<img src="img/下方.png">
								</div>
								
							</div>
						</li>
						
						<li class="navbar-li4">
							<div class="service">
								<div class="x-button">
									<button class="x">
										<img src="img/支付宝叉.png" style="cursor:pointer">
									</button>
								</div>
								<ul class="ser-subnav" style="border-bottom: 1px solid #2a2639;">
								  <li>
								    <a href="#">生活服务</a>
								  </li>
								  <li>
								    <a href="#">商家服务市场</a>
								  </li>
								</ul>
								
							</div>
							<a class="navbar-li-a" id="navbar-li-a4" href="#">生活服务</a>
						</li>
						<li class="navbar-li5">
							<div class="manage">
								<div class="x-button">
									<button class="x">
										<img src="img/支付宝叉.png" style="cursor:pointer">
									</button>
								</div>
								<ul class="man-subnav" style="border-bottom: 1px solid #2a2639;">
								  <li>
								    <a href="#">账户设置</a>
								  </li>
								  <li>
								    <a href="#">我的账单</a>
								  </li>
								  <li>
								    <a href="#">对账单</a>
								  </li>
								</ul>
								
								
							</div>
							<a class="navbar-li-a" id="navbar-li-a5" href="#" style="color: #fff;">账户管理</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="global-body">
				<div style="width: 990px;height: 790px;">
				<img class="global-body-img1" src="img/body.png">
				<a href="#" class="img-a1"> </a>
				<a href="#" class="img-a2"> </a>
				<img class="global-body-img2" src="img/body2.1.png">
				<a href="#" class="img-a3"> </a>
				<a href="#" class="img-a4"> </a>
				</div>
				<div class="global-body-safe">
					<img class="global-body-safe1" src="img/安全知识1.png">
					<img class="global-body-safe2" src="img/安全知识2.png">
				</div>	
				<ul class="global-body-safe-select">
					<li class="global-body-safe-select1"></li>
					<li class="global-body-safe-select2"></li>
				</ul>
				
			</div>
			<div class="global-foot">
				<div>
				<div class="footer-link">
				    <a href="#">诚征英才</a>
			       	<em>|</em>
			       	<a href="#">联系我们</a>
			       	<em>|</em>
			       	<a href="#">International Business</a>
				</div>
				<div class="footer-copyright">
					<a href="#">ICP证：沪B2-20150087</a>
				</div>
			</div>	
			</div>
		</div>
		
		
		
		
		
		
	</body>
</html>
